<template>
    <div>
      
      <div class="rich-text">
          <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption" 
          >

          </quill-editor>
      </div>

    </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import Quill from 'quill'

const Embed = Quill.import('blots/block/embed');

class IpcImage extends Embed{
  static create(value){
    let node = super.create();
    IpcImage.buildDiv(value,node)
    return node
  }

  static value(node) {
    return node.dataset.name;
  }

  static buildDiv(value,node){
    node.setAttribute('data-name', 'ipc-image');
    Object.assign(node.style,{
      textAlign:'center',
      lineHeight:'0',
      margin:'20px 0'
    });
    let image = document.createElement('img');
    image.setAttribute('width',440);
    image.setAttribute('src',value);

    node.appendChild(image)

  }
}


IpcImage.blotName = 'ipcImage';
IpcImage.className = 'ql-ipace-image';
IpcImage.tagName = 'div';


Quill.register(IpcImage)





  export default{
    components: {
      quillEditor,
      
    },
    data(){
      var _this = this;
      return{
        content:'测试',
        editorOption: {
              placeholder: '请输入正文',
              modules:{
                toolbar:{
                  container:[
                    ['bold','italic','underline','strike'],
                    ['blockquote','code-block'],
                    [{'header':1},{'header':2}],
                    [{'list':'ordered'},{'list':'bullet'}],
                    [{'script':'sub'},{'script':'super'}],
                    [{'indent':'-1'},{'indent':'+1'}],
                    [{'direction':'rtl'}],
                    [{'size':['small',false,'large','huge']}],
                    [{'header':[1,2,3,4,5,6,false]}],
                    [{'color':[]},{'background':[]}],
                    [{'font':[]}],
                    [{'align':[]}],
                    ['clean'],
                    ['image'],
                    ['IpacImageBlot']
                  ],
                  handlers:{
                    shadeBox:null,
                    IpacImageBlot:function(){
                      _this.test();
                    }
                  }

                },
                
                

              }

            },
      }
    },
    mounted(){
      this.initButton()
    },
    methods:{
      test(){
        let quill = this.$refs.myQuillEditor.quill;
        let length = quill.selection.savedRange.index;
        alert(length)
        quill.insertEmbed(length,'ipcImage','http://pic34.nipic.com/20131030/2455348_194508648000_2.jpg')
      },
      initButton(){
          //alert(123456)
          const customImage = document.querySelector('.ql-IpacImageBlot');

          //customImage.style.cssText = "width:65px; border:1px solid #ccc; border-radius:5px;font-size: 12px;";
          customImage.innerHTML="<i class=\"icon iconfont ipc-add-image\"></i>";

          

      },
    }
  }
</script>


<style>
  /*设置富文本高度*/
  .ql-editor{
    height:350px;
  }
</style>